<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	onload =function(){
		//得到所有二层ul
		var uls = document.getElementsByClassName("c1");
		for(var i=0;i<uls.length;i++){
		//设置样式 将得到的所有ul内容 用脱离文档流样式隐藏
			uls[i].style.display = "none";   
		}
	}
	
	function myfn(li){
		//通过li得到子元素ul
		var ul =li.getElementsByTagName("ul")[0];
		//判断显示还是隐藏
		ul.style.display = ul.style.display=="none"?"block":"none";
		
		
		
		//得所有二层ul
		var uls = document.getElementsByClassName("c1");
		for(var i=0;i<uls.length;i++){
		//判断如果当前遍历的ul不是点击的则让其隐藏
		if(uls[i]!=ul){
			uls[i].style.display="none";
		}
		}
	}
</script>
</head>
<body>
<ul>
	<li onclick="myfn(this)">工作好友
		<ul class="c1">
			<li>马云</li>
			<li>马化腾</li>
			<li>王健林</li>
		</ul>
	</li>
	<li onclick="myfn(this)">亲朋好友
		<ul class="c1">
			<li>习大大</li>
			<li>李克强</li>
			<li>栗战书</li>
		</ul>
	</li>
	<li onclick="myfn(this)">前女友们
		<ul class="c1">
			<li>范冰冰</li>
			<li>Angelababy</li>
			<li>赵丽颖</li>
		</ul>
	</li>
</ul>
</body>
</html>